<html>
  <head>
     <script type="text/javascript" src="../dojo1.7/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
     <script>
     dojo.require("dojox.gauges.AnalogGauge");
     dojo.require("dojox.gauges.AnalogArrowIndicator");

     dojo.ready(function(){
       var gauge = dijit.byId('halfCircle');
       console.debug(gauge);
       gauge.addIndicator(new dojox.gauges.AnalogLineIndicator({
         'value': 52,
         'color': '#D00000',
         'width': 3,
         'hover': 'Target: 52',
         'title': 'Target'
       }));
       gauge.addIndicator(new dojox.gauges.AnalogArrowIndicator({
         'value': 17,
         'length': 125,
         'width': 3,
         'hover': 'Value: 17',
         'title': 'Value'
       }));
     });
     </script>
  </head>
  <body>
    <div data-dojo-type="dojox.gauges.AnalogGauge"
  id="halfCircle"
  width="350"
  height="225"
  cx="175"
  cy="175"
  radius="125"
  startAngle="-90"
  endAngle="90"
  useRangeStyles="0"
  hideValues="true"
  majorTicks="{length: 5, offset: 125, interval: 5}"
  image="{url:'{{dataUrl}}dojox/gauges/tests/images/gaugeOverlay.png', width: 280, height: 155,x: 35, y: 38,overlay: true}">
  <div data-dojo-type="dojox.gauges.Range"
    low="0"
    high="10"
    hover="0 - 10"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#606060'}, {'offset': 1, 'color': '#707070'}]
    }">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="10"
    high="20"
    hover="10 - 20"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#707070'}, {'offset': 1, 'color': '#808080'}]
    }">
  </div>
  <div  data-dojo-type="dojox.gauges.Range"
    low="20"
    high="30"
    hover="20 - 30"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#808080'}, {'offset': 1, 'color': '#909090'}]
    }">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="30"
    high="40"
    hover="30 - 40"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#909090'}, {'offset': 1, 'color': '#A0A0A0'}]
    }">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="40"
    high="50"
    hover="40 - 50"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#A0A0A0'}, {'offset': 1, 'color': '#B0B0B0'}]
    }">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="50"
    high="60"
    hover="50 - 60"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#B0B0B0'}, {'offset': 1, 'color': '#C0C0C0'}]
    }">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="60"
    high="70"
    hover="60 - 70"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#C0C0C0'}, {'offset': 1, 'color': '#D0D0D0'}]
    }">
  </div>
  <div data-dojo-type="dojox.gauges.Range"
    low="70"
    high="75"
    hover="70 - 75"
    color="{
        'type': 'linear',
        'colors': [{'offset': 0, 'color': '#D0D0D0'}, {'offset': 1, 'color': '#E0E0E0'}]
    }">
  </div>
</div>
  </body>
</html>